<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - Datatable Usage</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/datatable/assets/skins/sam/datatable.css" />
<link rel="stylesheet" type="text/css" href="../lib/yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/skins/sam/container.css" />

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

</head>

<body class=" yui-skin-sam">

	<h1>inputEx - DataTable Usage</h1>

<!-- Example 1 -->
<div class='exampleDiv'>
 <h2>Dialog Editor</h2>
 <p></p>
 <div class='demoContainer' id='container1'></div>
 <div class='codeContainer'>
  <textarea name="code" class="JScript">
		
		/**
		 * Datasource and inputEx fields used for both examples
		 */
		var myDataSource = new YAHOO.util.DataSource([
		      {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF"},
		      {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel"},
		      {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF"},
		      {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy"}
		]);
		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
		myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category"] };
		
		var myFields = [
			{type: 'hidden', label: 'Id', name: 'id' },
			{type: 'date', label: 'Date', name: 'date' },
			{type: 'integer', label: 'Quantity', name: 'quantity' },
			{type: 'number', label: 'Amount', name: 'amount'},
			{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
			{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
		];
		
		new inputEx.widget.DataTable({
			parentEl: 'container1', 
			fields: myFields,
			datasource: myDataSource,
			datatableOpts: {caption:"DataTable Caption"}
		});
  </textarea>
 </div>
</div>



<!-- Example 2 -->
<div class='exampleDiv'>
 <h2>Show/Hide columns</h2>
 <p></p>
 <div class='demoContainer' id='container2'></div>
 <div class='codeContainer'>
  <textarea name="code" class="JScript">
		
		/**
		 * Datasource and inputEx fields used for both examples
		 */
		var myDataSource = new YAHOO.util.DataSource([
		      {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF"},
		      {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel"},
		      {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF"},
		      {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy"}
		]);
		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
		myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category"] };
		
		var myFields = [
			{type: 'hidden', label: 'Id', name: 'id' },
			{type: 'date', label: 'Date', name: 'date' },
			{type: 'integer', label: 'Quantity', name: 'quantity' },
			{type: 'number', label: 'Amount', name: 'amount'},
			{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
			{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
		];
		
		new inputEx.widget.DataTable({
			parentEl: 'container2', 
			fields: myFields,
			datasource: myDataSource,
			datatableOpts: {caption:"Click on table options to show/hide fields"},
			showHideColumnsDlg: true,
			
			columnDefs: [
				{"key": "id", "label": "Id", resizeable: true, sortable: true },
				{"key": "date", "label": "Date", resizeable: true, sortable: true, formatter: YAHOO.widget.DataTable.formatDate},
				{"key": "quantity", "label": "Quantity", resizeable: true, sortable: true, hidden: true},
				{"key": "amount", "label": "Amount", resizeable: true, sortable: true},
				{"key": "title", "label": "Title", resizeable: true, sortable: true},
				{"key": "category", "label": "Category", "hidden": true, resizeable: true, sortable: true}
			]
		});
  </textarea>
 </div>
</div>

<!-- Example 3 -->
<div class='exampleDiv'>
 <h2>Listening to the Custom Events</h2>
 <p></p>
 <div class='demoContainer' id='container3'></div>
 <div class='codeContainer'>
  <textarea name="code" class="JScript">
		/**
		 * Datasource and inputEx fields used for both examples
		 */
		var myDataSource = new YAHOO.util.DataSource([
		      {id:"po-0167", date:new Date(1980, 2, 24), quantity:1, amount:4, title:"A Book About Nothing", category: "SF"},
		      {id:"po-0783", date:new Date("January 3, 1983"), quantity:null, amount:12.12345, title:"The Meaning of Life", category: "Novel"},
		      {id:"po-0297", date:new Date(1978, 11, 12), quantity:12, amount:1.25, title:"This Book Was Meant to Be Read Aloud", category: "SF"},
		      {id:"po-1482", date:new Date("March 11, 1985"), quantity:6, amount:3.5, title:"Read Me Twice", category: "Philosophy"}
		]);
		myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
		myDataSource.responseSchema = { fields: ["id","date","quantity","amount","title", "category"] };
		
		var myFields = [
			{type: 'hidden', label: 'Id', name: 'id' },
			{type: 'date', label: 'Date', name: 'date' },
			{type: 'integer', label: 'Quantity', name: 'quantity' },
			{type: 'number', label: 'Amount', name: 'amount'},
			{type: 'string', label: 'Title', name: 'title', required: true, showMsg: true },
			{type: 'select', label: 'Category', name: 'category', choices: ['SF','Novel','Philosophy'] }
		];
		
		var myDialog = new inputEx.widget.DataTable({
			parentEl: 'container3', 
			fields: myFields,
			datasource: myDataSource,
			datatableOpts: {caption:"DataTable Caption"}
		});
		
		myDialog.itemRemovedEvt.subscribe(function(){
			alert('item deleted !');
		});
		
		myDialog.itemModifiedEvt.subscribe(function(){
			alert('item modified !');
		});
		
		myDialog.itemAddedEvt.subscribe(function(){
			alert('item added !');
		});
  </textarea>
 </div>
</div>


<!-- YUI JS -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/datasource/datasource-min.js"></script>
<script type="text/javascript" src="../lib/yui/datatable/datatable-min.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/button/button-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/mixins/choice.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/Group.js"  type='text/javascript'></script>
<script src="../js/widgets/Button.js"  type='text/javascript'></script>
<script src="../js/Form.js"  type='text/javascript'></script>
<script src="../js/fields/SelectField.js"  type='text/javascript'></script>
<script src="../js/fields/StringField.js"  type='text/javascript'></script>
<script src="../js/fields/HiddenField.js"  type='text/javascript'></script>
<script src="../js/fields/IntegerField.js"  type='text/javascript'></script>
<script src="../js/fields/NumberField.js"  type='text/javascript'></script>
<script src="../js/fields/DateField.js"  type='text/javascript'></script>
<script src="../js/fields/ColorField.js"  type='text/javascript'></script>
<script src="../js/json-schema.js"  type='text/javascript'></script>
<script src="../js/rpc/inputex-rpc.js"  type='text/javascript'></script>
<script src="../js/widgets/Dialog.js"  type='text/javascript'></script>
<script src="../js/widgets/DataTable.js"  type='text/javascript'></script>


<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

</body>
</html>